import React from 'react'
import { NavBar } from 'antd-mobile';
import { useNavigate } from 'react-router-dom';
import { List, Switch } from 'antd-mobile'
import Push from "push.js"

export default function Messagesettings() {
    let navigate = useNavigate()
    return (
        <div>
            <NavBar onBack={() => { navigate(-1) }}>消息设置</NavBar>
            <div style={{ background: "#f7f7f7", height: "calc(100vh - 45px)" }}>
                <List header=' '>
                    <List.Item extra={<Switch defaultChecked onChange={val => {
                        if (val) {
                            // Push.create("系统通知", {
                            //     body: "已打开消息推送",
                            //     icon: 'https://cdn7.axureshop.com/demo2024/2268035/images/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/u1747.svg',
                            //     timeout: 4000,
                            //     onClick: function () {
                            //         window.focus();
                            //         this.close();
                            //         navigate("/app/home")
                            //     }
                            // })
                            if ('Notification' in window) {
                                // 浏览器支持 Notifications API
                                Notification.requestPermission().then(function (permission) {
                                    if (permission === 'granted') {
                                        // 用户允许显示通知
                                        if (Notification.permission === 'granted') {  //创建通知
                                            var notification = new Notification('系统通知', {
                                                body: '已打开消息推送',
                                                icon: 'https://cdn7.axureshop.com/demo2024/2268035/images/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/u1747.svg'
                                            });

                                            notification.onclick = function () {
                                                // 处理通知点击事件
                                                window.open('http://localhost/:5173/app/home');
                                            };
                                        }
                                    } else {
                                        // 用户拒绝显示通知
                                    }
                                });
                            } else {
                                // 浏览器不支持 Notifications API
                            }
                        } else {
                            if ('Notification' in window) {
                                // 浏览器支持 Notifications API
                                Notification.requestPermission().then(function (permission) {
                                    if (permission === 'granted') {
                                        // 用户允许显示通知
                                        if (Notification.permission === 'granted') {  //创建通知
                                            var notification = new Notification('系统通知', {
                                                body: '已关闭消息推送',
                                                icon: 'https://cdn7.axureshop.com/demo2024/2268035/images/%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC/u1747.svg'
                                            });

                                            notification.onclick = function () {
                                                // 处理通知点击事件
                                                window.open('http://localhost:5173/app/home');
                                            };
                                        }
                                    } else {
                                        // 用户拒绝显示通知
                                    }
                                });
                            } else {
                                // 浏览器不支持 Notifications API
                            }
                        }
                    }} />}>接收消息推送</List.Item>
                    <List.Item extra={<Switch defaultChecked />}>接收私信</List.Item>
                </List>
                <List header='免打扰设置'>
                    <List.Item extra={<Switch defaultChecked={false} />}>通知免打扰</List.Item>
                    <List.Item extra='00:00-06:00' onClick={() => { }}>免打扰时间段</List.Item>
                </List>
            </div>
        </div>
    )
}